<template>
	<el-table
		:data="fields"
	  border
	  style="width: 100%"
	  :header-cell-style="{color:'#606266'}">
	  <el-table-column
	    prop="ch_name"
	    label="字段名称">
	  </el-table-column>
	  <el-table-column
	    prop="en_name"
	    label="唯一标识">
	  </el-table-column>
	  <el-table-column
	    prop="type_name"
	    label="字段类型">
	  </el-table-column>
	  <el-table-column
	    prop="must"
	    label="必填">
	    <template slot-scope="scope">
	    	<i class="fa fa-check" v-if="scope.row.must"></i>
	    </template>
	  </el-table-column>
	  <el-table-column
	    prop="display"
	    label="是否显示">
	    <template slot-scope="scope">
	    	<i class="fa fa-check" v-if="scope.row.display"></i>
	    </template>
	  </el-table-column>
	  <el-table-column
	    prop="order"
	    label="显示顺序">
	  </el-table-column>
	  <el-table-column
	    prop="create_time"
	    label="创建时间"
	    width="250">
	  </el-table-column>
	  <el-table-column
	  	fixed="right"
	    label="操作">
	    <template slot-scope="scope">
	      <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
	      <el-button type="text" size="small" style="color:red;" @click="del(scope.row)">删除</el-button>
	    </template>
	  </el-table-column>
	</el-table>
</template>
<script>
import {deleteAPItoken} from '@/utils/api'
export default {
	props: {
		fields: Array
	},
	methods: {
		edit (form) {
			this.$emit('showForm','编辑',form)
		},
		del (field) {
			this.$confirm('删除字段:'+field.ch_name+', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
      	const promise = deleteAPItoken(API.tempField+field.id+'/',this.$store.state.user.token)
				promise.then((res)=>{
					if(res.status == 204){
						this.$emit('getFields')
						this.$notify({
			        title: '成功',
			        message: '字段:'+field.ch_name+', 删除成功',
			        type: 'success'
			      })
					}else{
						this.$notify({
			        title: '失败',
			        message: data.message,
			        type: 'error'
			      })
					}
	      })
      }).catch(() => {})
		}
	}
}
</script>